test(query-devtools/Explorer): add tests for inline edit on primitive rows by sukvvon · Pull Request #10731 · TanStack/query

sukvvon · 2026-05-19T01:38:41Z

🎯 Changes

Extend Explorer.test.tsx with tests for the inline edit UI rendered on primitive rows when editable is enabled — the input element for string/number values, the inline ToggleValueButton for boolean, and the inline DeleteItemButton gated by itemsDeletable.

Added cases (inline edit, 4):

should write the new string value via "setQueryData" when a text input is changed — covers the input onChange path that writes the raw target.value for string.
should write the new number value via "setQueryData" when a number input is changed — covers the valueAsNumber branch for the number type.
should render "ToggleValueButton" inline for a boolean primitive row — locks the type() === 'boolean' branch in the primitive row.
should render "DeleteItemButton" inline when a primitive row has "itemsDeletable" — locks the editable && itemsDeletable && activeQuery !== undefined guard.

✅ Checklist

I have followed the steps in the Contributing guide.
I have tested this code locally with pnpm run test:pr.

🚀 Release Impact

This change affects published code, and I have generated a changeset.
This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

Tests
- Added test coverage for inline-edit behavior in the Explorer UI when editable: true. Includes verifying text edits update cached data, numeric edits parse and update values, boolean toggles render and operate, and inline controls for deleting items are present.
- No changes to exported/public interfaces; test-only additions.

… rows

coderabbitai · 2026-05-19T01:38:53Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f659b3bd-8226-49c8-bb61-d84e02fb61d3

📥 Commits

Reviewing files that changed from the base of the PR and between 5a479f9 and a4c59da.

📒 Files selected for processing (1)

packages/query-devtools/src/__tests__/Explorer.test.tsx

📝 Walkthrough

Walkthrough

A new describe('inline edit') test block validates Explorer UI behavior when editable: true. Test cases confirm that string and number inputs trigger queryClient.setQueryData with correct parsed values, boolean primitives render toggle controls, and deletable items show inline deletion buttons.

Changes

Inline edit behavior tests

Layer / File(s)	Summary
Inline edit behavior tests `packages/query-devtools/src/__tests__/Explorer.test.tsx`	New test cases verify string input changes, number input parsing, boolean toggle control presence, and delete button rendering; string/number edits assert cache updates via `queryClient.setQueryData` (observed with `getQueryData`).

Possibly related PRs

TanStack/query#10729: Adds action menu button tests for Explorer editable controls (DeleteItemButton, ToggleValueButton), validating similar setQueryData updates through a different UI interaction path.
TanStack/query#10714: Adds initial primitive and collection rendering tests to the same Explorer test file, covering foundational UI behavior prior to inline-edit assertions.

Suggested labels

package: query-devtools

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A tiny test hops into view,
I nudge a string, a number too,
Booleans blink, deletes appear,
Query cache listens, crystal clear.
Hooray — the Explorer sings anew!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title accurately describes the main change: adding tests for inline edit functionality on primitive rows in the Explorer component.
Description check	✅ Passed	The PR description follows the template structure with all required sections (Changes, Checklist, Release Impact) properly completed with clear details about the test cases added.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch test/query-devtools-explorer-edit-submit

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

nx-cloud · 2026-05-19T01:39:16Z

View your CI Pipeline Execution ↗ for commit 5a479f9

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	3m 18s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	1s	View ↗

☁️ Nx Cloud last updated this comment at 2026-05-19 01:48:28 UTC

github-actions · 2026-05-19T01:39:31Z

🚀 Changeset Version Preview

No changeset entries found. Merging this PR will not cause a version bump for any packages.

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/query-devtools/src/__tests__/Explorer.test.tsx`:
- Around line 353-372: The test "should write the new number value via
\"setQueryData\" when a number input is changed" is missing the valueAsNumber
property in the synthetic change event; update the fireEvent.change call in
Explorer.test.tsx so the event target includes both value and valueAsNumber
(e.g., target: { value: '42', valueAsNumber: 42 }) because Explorer reads
changeEvent.target.valueAsNumber (see Explorer.tsx where the number input
handler uses valueAsNumber).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9f7e0d91-59ea-4b1e-a3a3-880854e5ed89

📥 Commits

Reviewing files that changed from the base of the PR and between 57f8ec7 and 5a479f9.

📒 Files selected for processing (1)

packages/query-devtools/src/__tests__/Explorer.test.tsx

pkg-pr-new · 2026-05-19T01:42:04Z

More templates

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@10731

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@10731

@tanstack/lit-query

npm i https://pkg.pr.new/@tanstack/lit-query@10731

@tanstack/preact-query

npm i https://pkg.pr.new/@tanstack/preact-query@10731

@tanstack/preact-query-devtools

npm i https://pkg.pr.new/@tanstack/preact-query-devtools@10731

@tanstack/preact-query-persist-client

npm i https://pkg.pr.new/@tanstack/preact-query-persist-client@10731

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@10731

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@10731

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@10731

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@10731

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@10731

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@10731

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@10731

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@10731

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@10731

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@10731

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@10731

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@10731

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@10731

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@10731

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@10731

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@10731

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@10731

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@10731

commit: a4c59da

github-actions · 2026-05-19T01:42:42Z

size-limit report 📦

Path	Size
react full	12.1 KB (0%)
react minimal	9.07 KB (0%)

…change event payload

test(query-devtools/Explorer): add tests for inline edit on primitive…

5a479f9

… rows

github-actions Bot added the package: query-devtools label May 19, 2026

coderabbitai Bot reviewed May 19, 2026

View reviewed changes

Comment thread packages/query-devtools/src/__tests__/Explorer.test.tsx

sukvvon self-assigned this May 19, 2026

test(query-devtools/Explorer): explicitly provide 'valueAsNumber' in …

a4c59da

…change event payload

sukvvon merged commit a4cebdb into main May 19, 2026
11 checks passed

sukvvon deleted the test/query-devtools-explorer-edit-submit branch May 19, 2026 02:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test(query-devtools/Explorer): add tests for inline edit on primitive rows#10731

test(query-devtools/Explorer): add tests for inline edit on primitive rows#10731
sukvvon merged 2 commits into
mainfrom
test/query-devtools-explorer-edit-submit

sukvvon commented May 19, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 19, 2026 •

edited

Loading

Walkthrough

Changes

Possibly related PRs

Suggested labels

Estimated code review effort

Poem

Uh oh!

nx-cloud Bot commented May 19, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 19, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

pkg-pr-new Bot commented May 19, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 19, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

sukvvon commented May 19, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎯 Changes

✅ Checklist

🚀 Release Impact

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented May 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Possibly related PRs

Suggested labels

Estimated code review effort

Poem

Uh oh!

nx-cloud Bot commented May 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Changeset Version Preview

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

pkg-pr-new Bot commented May 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented May 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

sukvvon commented May 19, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 19, 2026 •

edited

Loading

nx-cloud Bot commented May 19, 2026 •

edited

Loading

github-actions Bot commented May 19, 2026 •

edited

Loading

pkg-pr-new Bot commented May 19, 2026 •

edited

Loading

github-actions Bot commented May 19, 2026 •

edited

Loading